<?php

function createBlocksLi($blocks) {
    $li = array();
    foreach ($blocks as $value) {

        if ($value["CoreBlock"]["cobl_status"] == 'a') {
            $onclick = "remove(this);";
            $class = "";
            $iconCls = "icon-tick-circle";
        } else {
            $onclick = "remove(this);";
            $class = "ui-state-inactive";
            $iconCls = "icon-cancel";
        }
        $li[] = "<li class=\"ui-state-default {$class}\" coblId=\"{$value["CoreBlock"]["id"]}\" coblStatus=\"{$value["CoreBlock"]["cobl_status"]}\" >
                        <a href=\"#\" class=\"easyui-linkbutton\" data-options=\"plain:true,iconCls:'{$iconCls}'\" onclick=\"{$onclick}\"></a>
                        {$value["CoreBlock"]["cobl_description"]}<span style='font-size:0.8em;'>[{$value["CoreBlock"]["cobl_name"]}]</span>
                    </li>";
    }
    return $li;
}
?>
<style type="text/css">
    #sortableTop, #sortableLeft, #sortableCenter, #sortableRight, #sortableBottom { list-style-type: none; margin: 0; padding: 0;  float: left; width: 100%;   }
    #sortableTop li, #sortableLeft li, #sortableCenter li, #sortableRight li, #sortableBottom li { margin: 0 0 3px 0; padding: 1px; width: 98%;  }

    .ui-state-inactive{
        color: #AAA;
        background-image: none;
        border-color: #CCC;
    }
</style>
<div style="padding:5px;background:#fafafa;">
    <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-save'" onclick="save();">Save All Blocks</a>
</div>
<div id="cc">  
    <div data-options="region:'north',split:true" style="height:150px;">
        <ul id="sortableTop" class="connectedSortable">
            <li class="ui-state-default ui-state-disabled">Top</li>
            <?php
            $liArray = createBlocksLi($editBlocks['t']);
            echo implode("", $liArray);
            ?>
        </ul>
    </div>  
    <div data-options="region:'south',split:true" style="height:150px;">
        <ul id="sortableBottom" class="connectedSortable">
            <li class="ui-state-default ui-state-disabled">Bottom</li>
            <?php
            $liArray = createBlocksLi($editBlocks['b']);
            echo implode("", $liArray);
            ?>
        </ul>
    </div>  
    <div data-options="region:'west',split:true" style="width:300px;">
        <ul id="sortableLeft" class="connectedSortable">
            <li class="ui-state-default ui-state-disabled">Left</li>
            <?php
            $liArray = createBlocksLi($editBlocks['l']);
            echo implode("", $liArray);
            ?>
        </ul>
    </div>  
    <div data-options="region:'east',split:true" style="width:300px;">
        <ul id="sortableRight" class="connectedSortable">
            <li class="ui-state-default ui-state-disabled">Right</li>
            <?php
            $liArray = createBlocksLi($editBlocks['r']);
            echo implode("", $liArray);
            ?>
        </ul>
    </div>  
    <div data-options="region:'center'">
        <ul id="sortableCenter" class="connectedSortable">
            <li class="ui-state-default ui-state-disabled">Center</li>
                <?php
                $liArray = createBlocksLi($editBlocks['c']);
                echo implode("", $liArray);
                ?>
        </ul>
    </div>  
</div>

<script>
        $('head').append('<link rel="stylesheet" href="<?php echo $this->Html->url('/js/jquery-ui/css/custom-theme/jquery-ui-1.8.23.custom.css', true); ?>" type="text/css" />');
        $.getScript("<?php echo $this->Html->url('/js/jquery-ui/development-bundle/ui/minified/jquery.ui.core.min.js', true); ?>", function(data, textStatus, jqxhr) {
            $.getScript("<?php echo $this->Html->url('/js/jquery-ui/development-bundle/ui/minified/jquery.ui.widget.min.js', true); ?>", function(data, textStatus, jqxhr) {
                $.getScript("<?php echo $this->Html->url('/js/jquery-ui/development-bundle/ui/minified/jquery.ui.mouse.min.js', true); ?>", function(data, textStatus, jqxhr) {
                    $.getScript("<?php echo $this->Html->url('/js/jquery-ui/development-bundle/ui/minified/jquery.ui.sortable.min.js', true); ?>", function(data, textStatus, jqxhr) {
                        $(function() {
                            $("#sortableTop, #sortableLeft, #sortableCenter, #sortableRight, #sortableBottom").sortable({
                                connectWith: ".connectedSortable",
                                placeholder: "ui-state-highlight",
                                items: "li:not(.ui-state-disabled)",
                                appendTo: 'body',
                                zIndex: 9999999
                            }).disableSelection();
                            $('body').layout('collapse', 'east');
                            $('body').layout('collapse', 'west');
                            setTimeout(function() {
                                $('body').layout('collapse', 'south');
                                setTimeout(function() {
                                    $('body').layout('collapse', 'north');
                                    $('#cc').layout({
                                        fit: true
                                    });
                                }, 500);
                            }, 200);
                            $(".easyui-linkbutton").linkbutton();

                        });
                    });
                });
            });
        });



        function remove(t) {
            //$(t).closest('li').remove();){
            $(t).linkbutton({
                iconCls: 'icon-tick-circle'
            });
            li = $(t).closest('li');
            li.addClass('ui-state-inactive');
            $(t).attr('onclick', 'add(this)');
            $(t).closest('li').attr('coblStatus', 'a');
            console.log($(t).closest('li').attr('coblStatus'));
        }
        function add(t) {
            $(t).linkbutton({
                iconCls: 'icon-cancel'
            });
            li = $(t).closest('li');
            li.removeClass('ui-state-inactive');
            $(t).attr('onclick', 'remove(this)');
            $(t).closest('li').attr('coblStatus', 'i');
            console.log($(t).closest('li').attr('coblStatus'));
        }
        function save() {
            $('div#divLoader').window('open');
            $.ajax({
                type: 'POST',
                url: 'saveBlocks',
                data: getAllValues(),
                dataType: 'json',
                success: function(data) {
                    $('div#divLoader').window('close');
                    $.messager.alert('Success', '<?php echo __('Blocks Saved'); ?>', 'info');
                }
            });
        }

        function getValues(position) {
            serializedVar = '';
            i = 0;
            $('#sortable' + position + ' li').each(function(index) {
                id = $(this).attr('coblId');
                if (id) {
                    serializedVar += 'coreBlock['+id+'][cobl_position]=' + position.toLowerCase().substr(0,1);
                    serializedVar += '&coreBlock['+id+'][cobl_status]=' + $(this).attr('coblStatus');
                    serializedVar += '&coreBlock['+id+'][id]=' + id;
                    serializedVar += '&coreBlock['+id+'][cobl_sequence]=' +(i)+ '&';
                    i++;
                }
            });
            return serializedVar;
        }

        function getAllValues() {
            serializedVar = getValues('Top');
            serializedVar += getValues('Left');
            serializedVar += getValues('Right');
            serializedVar += getValues('Center');
            serializedVar += getValues('Bottom');

            return serializedVar;
        }

</script>
